<template>
  <div>
    <h3>dibo-software/diboot</h3>
    <p>一个详细视图示例。</p>

    <!-- 用户详细信息 -->
    <div v-if="user">
      <h4>用户详细信息</h4>
      <ul>
        <li><strong>用户名:</strong> {{ user.username }}</li>
        <li><strong>角色:</strong> {{ user.role }}</li>
        <li><strong>创建时间:</strong> {{ user.createdAt }}</li>
      </ul>
    </div>

    <!-- 权限管理 -->
    <div class="permissions-section">
      <h4>权限管理</h4>
      <button @click="fetchPermissions" :disabled="loading">加载权限</button>
      <ul v-if="permissions.length > 0">
        <li v-for="(permission, index) in permissions" :key="index">{{ permission }}</li>
      </ul>
      <p v-else-if="!loading">点击按钮加载权限</p>
      <p v-else>加载中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 模拟用户数据
const user = ref({
  username: 'admin',
  role: '管理员',
  createdAt: '2023-10-01'
});

// 权限数据
const permissions = ref([]);
const loading = ref(false);

// 获取权限列表
const fetchPermissions = async () => {
  loading.value = true;
  try {
    // 模拟 API 请求
    const response = await axios.get('https://api.example.com/permissions');
    permissions.value = response.data.permissions;
  } catch (error) {
    console.error('获取权限失败:', error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.permissions-section {
  margin-top: 20px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 5px 0;
}
</style>